<template>
  <div>
    <div>
      <div class="clearfix bf-top-button">
        <div class="float-l">
          <el-button type="primary" @click="showAdd">新增</el-button>
        </div>
        <div class="float-r">
          <div class="float-l">
            <el-input placeholder="输入用户号/员工号搜索" prefix-icon="el-icon-search" v-model="searchData" @keyup.enter.native="quickSearch">
            </el-input>
          </div>
          <div class="float-l padding-l">
            <el-button type="primary" @click="showSearch">高级筛选</el-button>
          </div>
        </div>
      </div>

      <bf-table :data="userData" :setting="setting" :rowAction="rowAction" @editSubmit="editSubmit" @pageChange="pageChange" :editRules="editRules" ref="table"></bf-table>
    </div>
    <div>
      <bf-table-add ref="bfTableAdd" :editForm="setting2" @formSubmit="addEditSubmit" :editRules="editRules"></bf-table-add>
    </div>
  </div>
</template>

<style>

</style>

<script>
import { getUsers, addUser, deleteUser, updataUser, resetPassword } from '@/beneform4j/api/user'
export default {
  name: 'usermanager',
  data() {
    return {
      searchData: '',
      dialogVisible: false,
      userData: {
      },
      rowAction: [
        {
          label: '查看',
          click: (item) => {
            this.$refs.table.showDetail(item)
          }
        },
        {
          label: '编辑',
          click: (item) => {
            this.$refs.table.showEdit(item)
          }
        },
        {
          label: '删除',
          click: (item) => {
            this.$refs.table.showDelete(item)
          }
        },
        {
          label: '重置密码',
          click: (item) => {
            this.resetPassword(item)
          }
        }
      ],
      setting2: [
        {
          field: 'userName',
          title: '用户号/员工号',
          searchable: true,
          type: 'number'
        },
        {
          field: 'showName',
          title: '用户昵称',
          isShowMobile: false,
          editable: true,
          searchable: true,
          type: 'text'
        },
        {
          title: '用户角色',
          field: 'roleId',
          type: 'role',
          isHiden: true
        }
      ],
      setting: [ // 需要展示的列数据配置
        {
          field: 'userName',
          title: '用户号/员工号',
          // isHiden: true // 在table列中，是否展示该列，false: 展示， true, 隐藏 ， 默认为false
          // hideEdit: true // 在编辑，或者是新增中，该字段隐藏，不做编辑： true 隐藏， false 显示： 默认：false
          searchable: true, // 是否可搜索， true: 可搜索，高级搜索组件显示， false: 不可搜索，在搜索组件中不显示,默认为false, 不显示
          type: 'number', // form表单类型：text, org, radio, role
          disableEdit: true
        },
        {
          title: '用户ID',
          field: 'userId',
          type: 'text',
          hideEdit: true,
          disableEdit: true // 不可编辑： true: 不可编辑， false: 可编辑， 默认： false
        },
        {
          field: 'showName',
          title: '用户昵称',
          isShowMobile: false,
          editable: true,
          searchable: true,
          type: 'text'
        },
        {
          field: 'orgId',
          title: '机构号',
          searchable: true,
          type: 'org',
          isHiden: true,
          hideEdit: true,
          hideDetail: true
        },
        {
          field: 'orgName',
          title: '机构名称',
          type: 'text',
          hideEdit: true,
          hideDetail: true
        },
        {
          field: 'employeeName',
          title: '员工姓名',
          type: 'text',
          hideEdit: true,
          hideDetail: true
        },

        {
          field: 'identityType',
          title: '证件类型',
          type: 'selected',
          isParams: true, // 默认为false，当isParams 为true 时，下拉数据为参数类型，
          paramsId: 'DOCUMENTTYPE',
          hideEdit: true,
          hideDetail: true,
          searchable: false
        },
        {
          field: 'identityId',
          title: '证件号码',
          hideEdit: true,
          hideDetail: true,
          type: 'text'
        },
        {
          field: 'mobile',
          title: '移动电话',
          hideEdit: true,
          hideDetail: true,
          type: 'text'
        },
        {
          field: 'email',
          title: '电子邮箱',
          hideEdit: true,
          hideDetail: true,
          type: 'text'
        },
        {
          title: '用户角色',
          field: 'roleId',
          type: 'role',
          isHiden: true
        }
      ],
      editRules: {
        userName: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20个字符', trigger: 'blur' },
          { pattern: /[0-9A-Za-z_]+/, message: '输入字符只能为数字、字母或者下划线', trigger: 'blur' }

        ],
        showName: [
          { required: true, message: '请输入用户昵称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10个字符', trigger: 'blur' }
        ],
        userStatus: [
          { required: true, message: '请选择是否启用', trigger: 'change' }
        ],
        employeeNo: [
          { required: true, message: '请输入员工号', trigger: 'change' },
          { min: 2, max: 20, message: '长度在 2 到 20个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    addEditSubmit(form) {
      // console.log(form)
      this.addItem(form)
    },
    editSubmit(params, formType, formList) {
      // console.log(params, formType, formList)
      if (formType === 'add') {
        this.addItem(params)
      } else if (formType === 'search') {
        this.searchList(params)
      } else if (formType === 'delete') {
        const userId = params.row.userId
        this.deleteItem(userId)
      } else if (formType === 'edit') {
        this.updataItem(params, params.userId)
      }
    },
    updataItem(params, userId) {
      updataUser(params, userId).then((response) => {
        if (response.success) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.$refs.table.hidenForm()
          this.doGetUsers()
        }
      })
    },
    deleteItem(userId) {
      deleteUser(userId).then((response) => {
        if (response.success) {
          this.$message({
            message: '删除用户成功!',
            type: 'success'
          })
          this.doGetUsers()
        }
      })
    },
    addItem(params) {
      params.orgId = '0000'
      addUser(params).then((response) => {
        if (response.success) {
          this.$message({
            message: '新增用户成功!',
            type: 'success'
          })
          this.$refs.bfTableAdd.hidden()
          this.doGetUsers()
        }
      })
    },
    pageChange(pageParams) {
      this.doGetUsers(pageParams)
    },
    searchList(params) {
      this.doGetUsers(params)
      this.$refs.table.hidenForm()
    },
    handleDelete(row) {
      this.dialogVisible = true
    },
    doGetUsers(pageParams) {
      if (!pageParams) {
        pageParams = {
          page: 1,
          pageSize: this.$store.pageSize
        }
      }
      getUsers(pageParams).then((response) => {
        // const data = response.data
        this.userData = response
      }).catch((response) => {
        // console.log(response)
      })
    },
    formatCertType(item) {
      switch (item.identityType) {
        case '01':
          return '身份证'
        case '0':
          return '其他'
      }
    },
    formatLockFlag(item) {
      switch (item.lockFlag) {
        case '0':
          return '否'
        case '1':
          return '是'
      }
    },
    formatUserStatus(item) {
      switch (item.userStatus) {
        case '0':
          return '否'
        case '1':
          return '是'
      }
    },
    showSearch() {
      this.$refs.table.showSearch()
    },
    showAdd() {
      // this.$refs.table.showAdd()
      this.$refs.bfTableAdd.show()
    },
    quickSearch() {
      const params = {
        userName: this.searchData
      }
      this.searchList(params)
    },
    resetPassword(item) {
      this.$confirm('重置改用户密码, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        resetPassword(item.scope.row.userId, item.scope.row.userName).then((response) => {
          if (response.success) {
            this.$message({
              message: '重置用户密码成功',
              type: 'success'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消重置密码操作'
        })
      })
    }
  },
  mounted: function() {
    this.doGetUsers()
  }
}
</script>
